<template>
    <div class="star" :class="starType">
    	<span class="star-item" v-for="(itemClass,index) in itemClass" :class="itemClass" track-by="index"></span>
    </div> 
</template>

<script type="ecmascript-6">
const LENGTH=5;
const CLS_ON="on";
const CLS_HALF="half";
const CLS_OFF="off";
export default{
  props:{
  	size:{
  		type:Number
  	},
  	score:{
  		type:Number
  	}
  },
  computed:{
  	starType(){
  		return 'star-'+ this.size;
  	},
  	itemClass(){
  		let result=[];
  		let score=Math.floor(this.score*2)/2;
  		let hasDecimal=score%1!==0;
  		let integer=Math.floor(score);
  		for(let i=0;i<integer;i++){
  			result.push(CLS_ON);
  		}
  		if (hasDecimal) {
  			result.push(CLS_OFF);
  		}
  		while(result.length<LENGTH){
  			result.push(CLS_OFF);
  		}
  		return result;
  	}
  }
}
</script>

<style rel="stylesheet" lang="less">
 .detail-main .star-wrapper {
    margin-top: 18px;
    padding: 2px 0;
        text-align: center;
    }
    .star{
    	font-size: 0;
    .star-item{
    	display: inline-block;
    	background-repeat: no-repeat;
    	width: 20px;
    height: 20px;
    margin-right: 22px;
    background-size: 20px 20px;
    &:last-child{
    	margin: 0;
    }
    &.on{
    	background: url('./star48_on.png');background-size: 100% 100%;
    	}
    &.half{
    	background: url('./star48_half.png');background-size: 100% 100%;
    	}
    &.off{
    background: url('./star48_off.png');background-size: 100% 100%;
    	}
    }
    }
</style>